<script setup>

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  subtitle: {
    type: String,
    required: true
  },
  items: {
    type: Array,
    required: true,
    validator(value) {
      return value.length === 3 && value.every(item => 'icon' in item && 'title' in item && 'description' in item);
    }
  }
});
</script>

<template>
  <div class="flex justify-center items-center h-full pt-20">
    <div class="w-4/6">
      <div class="flex flex-col text-center space-y-6">
        <h2 class="text-4xl font-bold">{{ title }}</h2>
        <p class="text-gray-700/70 pb-10">{{ subtitle }}</p>
      </div>
      <div class="flex justify-between">
        <div class="flex pe-px bg-gradient-to-b from-transparent via-gray-300 to-transparent">
          <div class="flex flex-col text-center items-center space-y-3 pe-14 bg-white">
            <img :src="items[0].icon" width="48" height="48" alt="">
            <h3 class="text-base font-bold">{{ items[0].title }}</h3>
            <p class="text-gray-700/70 text-xs leading-relaxed">{{ items[0].description }}</p>
          </div>
        </div>
        <div class="flex flex-col text-center items-center space-y-3 px-14">
          <div class="flex flex-col text-center items-center space-y-3 bg-white">
            <img :src="items[1].icon" width="48" height="48" alt="">
            <h3 class="text-base font-bold">{{ items[1].title }}</h3>
            <p class="text-gray-700/70 text-xs leading-relaxed">{{ items[1].description }}</p>
          </div>
        </div>
        <div class="flex ps-px bg-gradient-to-b from-transparent via-gray-300 to-transparent">
          <div class="flex flex-col text-center items-center space-y-3 ps-14 bg-white">
            <img :src="items[2].icon" width="48" height="48" alt="">
            <h3 class="text-base font-bold">{{ items[2].title }}</h3>
            <p class="text-gray-700/70 text-xs leading-relaxed">{{ items[2].description }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>